<template>
  <div>
    <div style="width: 100%; display: flex; justify-content: center; align-items: center;">
      <div style="margin: 20px 40px;">
        <div id="myChart" :style="{ width: '1280px', height: '500px' }"></div>
      </div>

    </div>


  </div>
</template>
<script>
import { color } from 'echarts'
import { statisticsAdEndAdmin } from "../../http/api"
export default {
  name: 'Echarts',
  data () {
    return {
      msg: 'Vue + Echarts',
      xAxis: [],
      seriesVisit: [],
      seriesAd: [],
      totalKsAd: [],
      max: 100
    }
  },
  async mounted () {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    const parameter = {
      "$url": "statisticsAdEndAdmin",
      "authorID": userInfo._id,
    }
    const res = await statisticsAdEndAdmin(parameter)
    console.log('统计数据', res)
    this.xAxis = res.xAxis
    // this.seriesVisit = res.seriesVisit
    this.totalKsAd = res.totalKsAd
    this.seriesAd = res.seriesAd
    this.max = res.max

    this.drawLine()

  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: this.xAxis
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            max: this.max,
            position: 'right',
            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: this.max,
            position: 'left',
            axisLabel: {
              formatter: '{value} '
            }
          }
        ],
        series: [
        {
            name: '完播量(抖音)',
            type: 'bar',
            smooth: true,
            yAxisIndex: 1,
            data: this.seriesAd
          },
          {
            name: '完播量(快手)',
            type: 'bar',
            yAxisIndex: 0,
            data: this.totalKsAd
          }
         
        ]
      })
    },

  }
}
</script>
